<!doctype html>
{% load static %}
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>查看评价</title>
    <link rel="shortcut icon" href="{% static 'img/logo.png' %}">

    <!-- Bootstrap -->
    <link rel="stylesheet" href="{% static 'bootstrap3/css/bootstrap.min.css' %}"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <style>
        .sidebar {
            position: fixed;
            top: 51px;
            bottom: 0;
            left: 0;
            z-index: 1000;
            display: block;
            padding: 20px;
            overflow-x: hidden;
            overflow-y: auto;
            background-color: #f5f5f5;
            border-right: 1px solid #eee;
        }
    </style>
</head>

<body
        {#        background="{% static 'img/img.png' %}" style=" background-repeat:no-repeat ;background-size:100% 100%;#}
        {#background-attachment: fixed;"#}
>


<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                    aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" style="padding: 3px 0px 3px 3px;margin: 0px">
                <img alt="Brand" width="45px" height="45px" src="{% static 'img/logo.png' %}">
            </a>
            <b><a class="navbar-brand" style="font-size: 15px">教师教学质量评价系统的设计</a></b>
        </div>
        <div id="navbar" class="collapse navbar-collapse">

            <ul class="nav navbar-nav navbar-right">
                <li><a href="">欢迎您&nbsp;{{ request.session.teacher_id }}</a></li>
                {% if request.session.teacher_id %}
                    <li>
                        <a href="{% url 'teacher_pswd_update' %}">修改密码</a>
                    </li>
                    <li>
                        <a href="/logout/">退出登录</a>
                    </li>
                {% endif %}
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</nav>


<div class="container-fluid">
    <div class="row clearfix">
        <div class="col-xs-12 col-md-12 column" style="margin-top: 50px;padding: 0px">
            <div class="row clearfix" style="margin: 0px">
                <div class="col-xs-4 col-md-3 sidebar" style="padding: 0px">


                    <div class="list-group " style="font-size: 12pt;padding: 0px;">
                        <div>
                            <a class="list-group-item" style="border-radius: 0px;border: #8c909a solid 1px;background-color: white;color: black;font-size: 14pt  "><b>授课班级</b></a>
                            {% regroup a by xuehao__banji as country_list %}
                            {% for s in country_list %}

                                <a class="list-group-item  {% if banji_id == s.grouper %}
                                active
                                {% endif %} " href="/teachers/teacher_pingjia/{{ s.grouper }}"
                                   target="leftnav"
                                   style="border-radius: 0px;border: #8c909a solid 1px;">{{ s.grouper }}</a>

                            {% endfor %}
                        </div>
                    </div>


                </div>

                <div class="col-xs-8 col-md-9 col-xs-offset-4 col-md-offset-3 column">
                    <div style="opacity: 0.8;background-color: white;border-radius: 20px;margin-top: 20px;margin-bottom: 60px">

                        <div class="bg-primary" style="padding: 10px;border-radius: 10px;margin-bottom: 10px">
                            <p>班级：{{ banji_id }}</p>
                            <p>学生数量：{{ stu_sum }}</p>
                            <p>完成评价学生数量：{{ pingjia_sum }}</p>
                        </div>
                        <label for="" style="color: red">学生评价率：</label>
                        <div class="progress" style="">

                            <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="0"
                                 aria-valuemin="0"
                                 aria-valuemax="100" style="min-width: {{ PJL }}%;">
                                {{ PJL }}%
                            </div>
                        </div>


                        {#显示评价数据表#}

                        {% for i in tiku %}


                            <label for="">{{ forloop.counter }}.{{ i.timu }}</label>
                            <div class="progress" style="margin-bottom: 30px">

                                <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0"
                                     aria-valuemax="100"
                                     style="min-width: {% cycle avg1 avg2 avg3 avg4 avg5 avg6 avg7 avg8 avg9 avg10 %}%;">
                                    {% cycle avg1 avg2 avg3 avg4 avg5 avg6 avg7 avg8 avg9 avg10 %}%
                                </div>
                            </div>






                        {% endfor %}
                        {#                显示评论#}


                        <label for="" style="color: red">综合评价：</label>
                        <div class="progress" style="margin-bottom: 30px">

                            <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="0"
                                 aria-valuemin="0"
                                 aria-valuemax="100" style="min-width: {{ s_avg }}%;">
                                {{ s_avg }}%
                            </div>
                        </div>
                        <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
                        {% load static %}
                        <script src="{% static 'echarts/echarts.js' %}"></script>
                        <div class="" id="main"
                             style="height: 330px;border: black solid 1px;margin: 20px 0px 10px 0px;padding: 10px 10px 10px 10px;"></div>
                        <script type="text/javascript">
                            // 基于准备好的dom，初始化echarts实例
                            var myChart = echarts.init(document.getElementById('main'));

                            // 指定图表的配置项和数据
                            var option = {
                                title: {
                                    text: '评价柱状图'
                                },
                                tooltip: {},
                                legend: {
                                    data: ['成绩']
                                },
                                xAxis: {
                                    name: '题目序号',
                                    data: [
                                        {% for i in tiku %}
                                            '{{ forloop.counter }}',
                                        {% endfor %}


                                    ]
                                },
                                yAxis: {},
                                series: [
                                    {
                                        name: '百分之（%）',
                                        type: 'bar',
                                        data: [
                                            {% for foo in tiku %}



                                                {% cycle avg1 avg2 avg3 avg4 avg5 avg6 avg7 avg8 avg9 avg10 %},
                                            {% endfor %}
                                        ]
                                    }
                                ]
                            };

                            // 使用刚指定的配置项和数据显示图表。
                            myChart.setOption(option);
                        </script>


                        <h3 for="" style="margin-top: 50px;margin-left: 35px;margin-bottom: 20px">学生留言 </h3>
                        <ul class="list-group">
                            {% for i in pingjiabaio %}
                                {#                            {{ i.s_liuyan|length }}#}
                                {#                            {% if i.s_liuyan|length >= 5 %}#}
                                {% if i.s_liuyan %}

                                    <li class="list-group-item list-group-item-success">{{ i.s_liuyan }}</li>
                                {% endif %}







                            {% endfor %}
                        </ul>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<footer class="footer navbar-fixed-bottom ">
    <div class="container ">
        <h5 class="text-muted">© 2022 教师教学质量评价系统的设计与实现</h5>
    </div>
</footer>
<style>
    .footer {
        background-color: #333;
    }
</style>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
        crossorigin="anonymous"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="{% static 'bootstrap3/js/bootstrap.min.js' %}"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>
</body>
</html>